<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
                <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">重置</el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input v-model="listQuery.keyword" class="input-width" placeholder="app名称" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
        </el-card>

        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%;" border>
                <el-table-column label="clientId"  align="center">
                    <template slot-scope="scope">{{scope.row.clientId}}</template>
                </el-table-column>
                <el-table-column label="clientSecret"  align="center">
                    <template slot-scope="scope">{{scope.row.clientSecret}}</template>
                </el-table-column>
                <el-table-column label="回调地址"  align="center">
                    <template slot-scope="scope">{{scope.row.webServerRedirectUri}}</template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 编辑和添加 -->
        <el-dialog :title="isEdit?'编辑app':'添加app'" :visible.sync="dialogVisible" width="40%">
            <el-form :model="app" ref="appForm" label-width="150px" size="small">
                <el-form-item label="clientId">
                    <el-input v-model="app.clientId" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="回调地址">
                    <el-input v-model="app.webServerRedirectUri" style="width: 250px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  <script>
    import {fetchList, deleteApp, addApp, updateApp} from '@/api/app';
    export default {
      name: 'adminList',
      data() {
        return {
            listQuery: {
                keyword: ''
            },
            list: [

            ],
            app: {
                clientId: '',
                webServerRedirectUri: ''
            },
            dialogVisible: false,
            isEdit: false
        }
      },
      created() {
        this.getList();
      },
      filters: {

      },
      methods: {
        // 列表查询
        handleSearchList() {
            this.getList();
        },
        // 重置
        handleResetSearch() {
            this.getList();
        },
        // 列表查询
        getList() {
            fetchList().then(resp => {
                this.list = resp.data;
            })
        },
        // 添加app
        handleAdd() {
            this.isEdit = false;
            this.dialogVisible = true;
        },
        // 更新app
        handleUpdate(index, row) {
            this.$message({
                message: '暂不支持更新!',
                type: 'warning'
            });
        },
        // 确认操作
        handleDialogConfirm() {
            if (!this.isEdit) {
                addApp(this.app).then(resp => {
                    this.$message({
                        message: '创建成功!',
                        type: 'success'
                    });
                    this.dialogVisible = false;
                    this.app.clientId = "";
                    this.getList();
                })
            }
        },
        // 删除app
        handleDelete(index, row) {
            this.$confirm('是否要确认?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteApp(row.clientId).then(resp => {
                    this.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    this.getList();
                }) 
            })
        }
      }
    }
  </script>
  <style></style>
  
  
  